<template>
	 
		<view class="select-bg" v-if="show">
			<view class="select-alet">
				<view class="select-top">
					<view class="commint" @click='selectobjc(false)'>关闭</view>
					<view class="select-header">{{title}}</view>
					<view class="commint" style="color: #3cc51f" @click='selectobjc(true)'>
						 确定 
					</view>
				</view>
				 
				<view class="select-search">
					
					<!-- <input type="text" v-model="query.name">
					<view  @click='search(true)'>搜索</view> -->
					<u-search v-model="query.name" @search="search(true)" @custom="search(true)"></u-search> 
				</view> 
	 
				<scroll-view class="scroll" scroll-y @scrolltolower="scrolltolower">
					 
					<view :class="checkedIndex===index ? 'serve selectView' : 'serve'" 
					v-for="(item,index) in list" :key="index"  @click='toselect(item,index)' >
						<view class="s1">{{item.name}}</view>  	
						<view class="s2"><text class="text">{{item.money}}</text> 元/{{item.unit}}</view>
						<!-- <view class="s3">
							<view class="">{{item.salesVolume}}</view>
							<view style="color: #999999;font-size: 24rpx;">总销量</view>
						</view> -->
					</view>
					<view v-if="total==0" style="margin-top: 150rpx;text-align: center;color: #666;">
						<uni-load-more  :status="loading?'loading':'noMore'"></uni-load-more>
					</view>
				</scroll-view>
				 
			</view>
		</view>
		 
</template>

<script>
	import {categoryListAPI} from "@/api/order.js"
	export default {
		name:"wu-select",
		props: {
			title: {
				type: String,
				default: '请选择服务项目'
			},
			 
			show:{
				type:Boolean,
				default:false
			},
			multiple:{
				type:Boolean,
				default:false
			},
			// url
			action:{
				type:  String,
				default: 'tmPlant/list'
			},
			tableList: {
				type: Object,
				default: (e)=>{
					return {
						name:"工厂名称", 
					}
				}
			},
			 
		},
		watch:{
			// tableList(val,old){
			// 	if(val==old)return
			// 	this.query={
			// 		pageNo:1,
			// 		pageSize:20
			// 	}
			// 	this.checkedIndex=""
			// 	this.checkedItem={}
			// 	this.list=[]
			// 	this.maxPageNum=0
			// 	this.tableObj=val
			// 	this.getList()
			// }
		},
		created() {
			 this.getList()
			
		},
		data() {
			return { 
				list:[],
				query:{
					pageNo:1,
					pageSize:20
				},
				checkedIndex:"",
				checkedItem:{},
				tableObj:{}, 
				maxPageNum:0,
				inpFlag:false,
				total:0,
				loading:false
			}
		},
		methods:{
			getList(){
				this.loading=true
				categoryListAPI( this.query).then(res=>{
					 
					this.maxPageNum = Math.floor(res.total / this.query.pageSize) + 1
					this.total=res.total
					this.list=this.list.concat(res.list)
					this.loading=false 
					 
					
				})
			},
			toselect(item,index){
				//方法一 单选
				this.checkedIndex=index
				this.checkedItem=item
				
				// 方法二
				// if(this.multiple){//多选
				// 	this.list[index].select = !item.select
				// }else{
				// 	this.$emit('chose', item)//单选
				// }
				this.$forceUpdate()
			},
			selectobjc(flag) { 
				
				for (var key in this.tableObj) {
				 	this.query[key]=""  
				}
				setTimeout(()=>{
					this.$emit('chose', this.checkedItem,this.checkedIndex,flag)
				},1)
			},
			scrolltolower(){
				
				if(this.maxPageNum>this.query.pageNo){
					this.query.pageNo++
					this.getList()
				}else{
					uni.showToast({
						title:"暂无更多数据", 
						icon:"none"
					})
				}
				
			},
			search(flag){
				 this.list=[]
				 this.checkedIndex=""
				 this.checkedItem={}
				this.query.pageNo=1
				 
				this.getList()
			}
			 
		}
		
	}
</script>

<style scoped lang="scss">
 
.select-bg{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 750rpx;
	background-color: rgba(0,0,0,.3);
	z-index: 99999;
}
.select-alet{
	width: 100%;
	height: 720rpx;
	background: #fff;
	position: relative;
}
.select-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.select-header{
	/* width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center; */
	color: #999999;
	font-size: 26rpx;
	font-weight: 500;
}
.commint{
	color: #3A3E5D;
	font-weight: 500;
	font-size: 26rpx;
	padding: 30rpx; 
}
.scroll{
	width: 100%;
	height: 600rpx;
	padding-bottom: 30rpx;
	/* background-color: red; */
}
.serve{
	margin-bottom: 10rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	width: 100%;
	display: flex;
	align-items: center;
	padding:15rpx 25rpx;
	.s1{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.s2{
		flex: 1;
		font-size: 28rpx;
		text-align: right;
		line-height: 40rpx;
		.text{
			font-size: 28rpx;
			font-weight: bold;
			color: #277EEF;
			line-height: 40rpx;
			margin-right: 5rpx;
		}
	}
	 
}
	
.item{
	width: 100%;
	display: flex;
	align-items: center;
	/* justify-content: center; */
	/* height: 66rpx; */
	padding: 10rpx 32rpx;
	box-sizing: border-box;
	color: #444444;
	font-size: 20rpx;
	background: #fff;
	justify-content: space-between;
	/* background: #F8F8F8; */
}
.selectView{
	background-color: #F6F6F6;
}
.line1 {
	font-size: 20rpx;
	flex: 1;
}
.select-icon{
	width: 40rpx;
	height: 40rpx;
	margin-left: 24rpx;
}
.select-search{
	display: flex;
	align-items: center;
	padding: 20rpx;
 
	input{
		border: 1rpx solid #999;
		line-height: 30rpx;
		border-radius: 3rpx;
		margin-right: 15rpx;
		padding: 2rpx 5rpx;
		border-radius: 10rpx;
	}
	view{
		font-size: 25rpx;
		margin-right: 10rpx;
	}
}
.otherReason{
	width: 689rpx;
	/* height: 96rpx; */
	background: #FAFAFA;
	border-radius: 8rpx;
	padding: 0 32rpx;
	box-sizing: border-box;
	font-size: 20rpx;
	display: flex;
	align-items: center;
	margin-top: 28rpx;
	margin: 0 auto;
}
</style>